<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emotion Recognition Result</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #d0f0c0; /* 设置淡青绿背景颜色 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            justify-content: space-between; /* 左右窗口之间平分空间 */
            width: 1000px; /* 增加整体窗口长度 */
            height: 500px; /* 左右窗口高度一致 */
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #f9f9f9; /* 白色背景 */
            border: 2px solid black; /* 容器外边框 */
        }

        .window {
            padding: 20px;
            display: flex;
            flex-direction: column; /* 让窗口内容垂直对齐 */
            align-items: center; /* 窗口内容居中对齐 */
            justify-content: center;
            text-align: center;
        }

        #image-window {
            flex-basis: 60%; /* 左侧窗口宽度为容器的60% */
            border-right: 2px solid black; /* 左右窗口之间的黑色分隔线 */
        }

        #result-window {
            flex-basis: 40%; /* 右侧窗口宽度为容器的40% */
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }

        /* 调整标题的margin-top使其在同一水平线上 */
        .window h1 {
            margin-top: 0; /* 使两个窗口的标题在同一水平线上 */
        }

        /* 缩小左侧窗口的图片 */
        #image-window img {
            max-width: 82%; /* 调整图片大小 */
            max-height: 82%; /* 调整图片大小 */
        }

        .emoji {
            font-size: 120px; /* 设置表情大小 */
            margin-top: 30px;
        }

        .emotion-label {
            font-size: 20px;
            margin-top: 19px;
            color: #333;
        }

        .return-button {
            display: block;
            margin: 36px auto;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 左侧窗口用于展示图像和标题 -->
        <div class="window" id="image-window">
            <h1>EEG Emotion Visualization</h1>
            <img src="{{ image_url }}" alt="Emotion Image">
        </div>

        <!-- 右侧窗口用于展示情绪识别结果 -->
        <div class="window" id="result-window">
            <h1>Emotion Recognition Result</h1>
            <div class="emoji">
                {% if emotion == 'Positive' or emotion == 'Happy' %}
                    😀
                {% elif emotion == 'Negative' %}
                    😢
                {% elif emotion == 'Neutral' or emotion == 'Not happy' %}
                    😐
                {% endif %}
            </div>
            <div class="emotion-label">
                Emotion: {{ emotion.capitalize() }}
            </div>
            <a href="/upload" class="return-button">Back</a>
        </div>
    </div>
</body>

</html>
